<ion-header>
  <ion-toolbar>
    <ion-title [ngClass]="{titleFont: true}">
      <div>FINSHARE PAY</div>
      <div id="badge">
        <div (click)="toNotification()">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#iconnotification"></use>
          </svg>
        </div>
        <div id="badges" (click)="toBadges(totalNum)">
          <!-- <ion-icon name="headset-outline"></ion-icon> -->
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#iconservice"></use>
          </svg>
          <ion-badge color="danger" slot="end" id="cart-badge" [ngStyle]="{'display': badgeDisplay}">
            {{badgeNumber}}
          </ion-badge>
        </div>
      </div>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="background_color">
  <div class="home_content">
    <div class="box_bottom">
      <ion-grid class="ion-padding-horizontal">
        <ion-row>
          <ion-col class="clean_padding">
            <div class="home_pays">
              <div>
                <a [routerLink]="['/tabs/home/scan']">
                  <div>
                    <ion-img src="assets\home\scan.png" alt="" class="scan_img">
                    </ion-img>
                  </div>
                  <div class="scan_text">
                    <ion-text color="">
                      <h1>
                        {{'home.scan' | translate}}
                      </h1>
                    </ion-text>
                  </div>
                </a>
              </div>
            </div>
            <!--  <ion-label class="home_pays">
              <a [routerLink]="['/home/scan']">
                <ion-img src="assets\home\scan.png" alt="">
                </ion-img>
                <ion-text color=""> Scan </ion-text>
              </a>
            </ion-label> -->
          </ion-col>
          <!--  <ion-col>
            <ion-label class="home_pays">
              <a [routerLink]="['/home/pay']">
                <ion-img src="assets\home\pay.png" alt=""></ion-img>
                Pay
              </a>
            </ion-label>
          </ion-col>
          <ion-col>
            <ion-label class="home_pays">
              <a [routerLink]="['/home/coupons']">
                <ion-img src="assets\home\coupons.png" alt=""></ion-img>
                Coupons
              </a>
            </ion-label>
          </ion-col> -->
        </ion-row>
      </ion-grid>
    </div>
    <div id="detail_content" class="box_bottom">
      <ion-grid class="ion-padding-horizontal">
        <ion-row>
          <ion-col class="clean_padding">
            <div id="home_detail">
              <ion-img src="../../../assets/home/title1.png" alt=""></ion-img>
              <!-- <ion-grid>
                <ion-row>
                  <ion-col>
                  </ion-col>
                </ion-row>
              </ion-grid> -->
              <!-- <div>
                <ion-grid>
                  <ion-row>
                    <ion-col>
                      <div class="detail_text1">Pre-Approved Credit Up to</div>
                      <div class="detail_text2">$ 145,000.00</div>
                      <div class="detail_text3">
                        <p>
                          <span>APR 16%</span>
                        </p>
                      </div>
                    </ion-col>
                  </ion-row>
                </ion-grid>
              </div>
              <div id="home_detail_options">
                <ion-grid>
                  <ion-row>
                   <!--  <ion-col>
                      No Fee
                    </ion-col>
                    <ion-col>
                      No Income Proof
                    </ion-col>
                    <ion-col>
                      Flexible Payment Plan
                    </ion-col> 
                  </ion-row>
                </ion-grid>
              </div> -->
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
      <!--  <div id="home_detail_bottom">
        <a [routerLink]="[ '/login' ]">Sign Up</a>
      </div> -->
    </div>
    <div id="ad" class="box_bottom">
      <ion-grid class="ion-padding-horizontal">
        <ion-row>
          <ion-col class="clean_padding">
            <div class="ad_info">
              <!--  <ion-img src="../../../assets/home/item1.png" alt="" width="100" height="100">
              </ion-img> -->
              <!--  <div class="ad_info1">
              
              </div>
              <div class="ad_info2"></div> -->
              <div>
                <ion-grid class="ion-padding-vertical">
                  <ion-row>
                    <ion-col size="12" class="ion-padding-horizontal">
                      <ion-text class="title_area text_white">
                        Item's title
                      </ion-text>
                    </ion-col>
                  </ion-row>
                  <ion-row>
                    <ion-col size="12" class="ion-padding-horizontal">
                      <ion-text class="description_area text_white">
                        Description
                      </ion-text>
                    </ion-col>
                  </ion-row>
                </ion-grid>
              </div>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>
    <div id="home_bottom">
      <ion-grid class="ion-padding-horizontal">
        <ion-row>
          <ion-col class="clean_padding">
            <div class="bottom_content">
              <div>
                <ion-grid>
                  <ion-row>
                    <ion-col style="padding: 3px;">
                      <ion-label>
                        <ion-text color="" class="header_area">
                          {{'home.special_promotions' | translate}}
                        </ion-text>
                      </ion-label>
                    </ion-col>
                  </ion-row>
                </ion-grid>
              </div>
              <div id="" style="flex-grow: 2;">
                <div class="home_bottom_left">
                  <div>
                    <ion-grid class="ion-padding-horizontal ion-padding-top">
                      <ion-row size="12">
                        <ion-col class="clean_padding title_area">
                          Item's title
                        </ion-col>
                      </ion-row>
                      <ion-row size="12">
                        <ion-col class="clean_padding description_area">
                          Description
                        </ion-col>
                      </ion-row>
                    </ion-grid>
                  </div>
                  <div class="img_box">
                    <div id="img_area">

                    </div>
                  </div>
                </div>
                <div class="home_bottom_right">
                  <div class="home_bottom_right_first">
                    <div>
                      <ion-grid class="ion-padding-horizontal ion-padding-top clean_padding_bottom">
                        <ion-row size="12">
                          <ion-col class="clean_padding title_area">
                            Item's title
                          </ion-col>
                        </ion-row>
                      </ion-grid>
                    </div>
                    <div class="img_box">
                      <ion-grid class="clean_padding">
                        <ion-row>
                          <ion-col class="ion-padding-start description_area" size="6">
                            Description
                          </ion-col>
                          <ion-col size="6">
                            <div id="item_img_area">
                            </div>
                          </ion-col>
                        </ion-row>
                      </ion-grid>
                      <!--               <div>
                        Description
                      </div>
                      <div id="item_img_area">
  
                      </div> -->
                    </div>
                  </div>
                  <div class="home_bottom_right_last">
                    <div>
                      <ion-grid class="ion-padding-horizontal ion-padding-top clean_padding_bottom">
                        <ion-row size="12">
                          <ion-col class="clean_padding title_area">
                            Item's title
                          </ion-col>
                        </ion-row>
                      </ion-grid>
                    </div>
                    <div class="img_box">
                      <ion-grid class="clean_padding">
                        <ion-row>
                          <ion-col class="ion-padding-start description_area" size="6">
                            Description
                          </ion-col>
                          <ion-col size="6">
                            <div id="item_img_area">
                            </div>
                          </ion-col>
                        </ion-row>
                      </ion-grid>
                    </div>

                  </div>
                </div>
              </div>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>

    <!--  <div>
       <ion-input type="text" [value]="badgeNumber"> </ion-input>
      <ion-button color="primary" (click)="setBadges()"> setBadges </ion-button>
      <ion-button color="primary" (click)="getBadges()"> getBadges </ion-button>
      <ion-button color="primary" (click)="increaseBadges()"> increaseBadges </ion-button> 
      <ion-button color="primary" (click)="addBadges()"> addBadges </ion-button>
    </div> -->
  </div>
</ion-content>